import { Pagination, Autoplay } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import { PureComponent } from 'react';

// import SwiperCore, { EffectFade } from 'swiper';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/autoplay';
// import reactFlexible from 'react-flexible';
import './headerLoop.scss';
import 'swiper/css/effect-fade';
/* 
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}
*/

import SwiperCore, { EffectFade } from 'swiper';
SwiperCore.use([EffectFade]);
// loop 首尾衔接的轮播效果
class MainHeader extends PureComponent {
    constructor() {
        super()
        this.state = {
            myswiper: null,
            swiperBg: 0,
            showType: false,

        }
    }
    componentDidMount() {
        window.onscroll = () => {
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            if (scrollTop > 10) {
                this.setState({
                    showType: true
                })
            } else {
                this.setState({
                    showType: false
                })
            }
            if (scrollTop > 200) {
                this.state.myswiper.autoplay.stop();
            } else {
                this.state.myswiper.autoplay.start();
            }
        }
    }

    componentWillUnmount() {
        window.onscroll = undefined
    }
    goSearch = () => {
        this.props.history.push('/search')
    }
    render() {
        let { headerLooplist, listNav } = this.props;
        let { swiperBg, showType } = this.state;
        // let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        // let test = null
        // if (scrollTop > 10) {
        //     test = <div className='fix_header' style={{ backgroundImage: `url(${headerLooplist[swiperBg].singleBackgroundURL})` }} >
        //         <div style={{
        //             position: 'absolute',
        //             zIndex: '5',
        //             color: '#fff',
        //             fontSize: '16px',
        //             top: '15px',
        //             left: '10px',

        //         }}>旺仔旺铺</div>
        //         <div style={{
        //             width: '90%',
        //             height: '30px',
        //             position: 'absolute',
        //             zIndex: '5',
        //             top: '50px',
        //             outline: 'none',
        //             border: 'none',
        //             background: '#f1f1f1',
        //             left: 'calc(10% / 2)',
        //             borderRadius: '20px'

        //         }} />
        //     </div>
        // } else {
        //     test = null
        // }

        return <div>
            {/* 头部title */}
            <div className={showType ? 'fix_header' : "fix_header_0"} style={{ backgroundImage: `url(${headerLooplist[swiperBg].singleBackgroundURL})` }}>
                <div style={{
                    position: 'absolute',
                    zIndex: '5',
                    color: '#fff',
                    fontSize: '16px',
                    top: '15px',
                    left: '10px'
                }}>旺仔旺铺</div>
                {/* 头部固定 */}
                {/* <div>
                {test}
            </div> */}
                {/* 搜索框 */}
                <div style={{
                    width: '90%',
                    height: '30px',
                    position: 'absolute',
                    zIndex: '5',
                    top: '50px',
                    outline: 'none',
                    border: 'none',
                    background: '#f1f1f1',
                    left: 'calc(10% / 2)',
                    borderRadius: '20px'
                }} onClick={this.goSearch} />
            </div>

            <div style={{ backgroundImage: `url(${headerLooplist[swiperBg].singleBackgroundURL})` }}>
                <div style={{
                    position: 'absolute',
                    zIndex: '5',
                    color: '#fff',
                    fontSize: '16px',
                    top: '15px',
                    left: '10px'
                }}>旺仔旺铺</div>
                {/* 头部固定 */}
                {/* <div>
                {test}
            </div> */}
                {/* 搜索框 */}
                <div style={{
                    width: '90%',
                    height: '30px',
                    position: 'absolute',
                    zIndex: '5',
                    top: '50px',
                    outline: 'none',
                    border: 'none',
                    background: '#f1f1f1',
                    left: 'calc(10% / 2)',
                    borderRadius: '20px'

                }} onClick={this.goSearch} />
            </div>
            {/* 轮播图 */}
            <Swiper className='nav_box' effect="fade"
                modules={[Pagination, Autoplay, EffectFade]}
                pagination={{ clickable: true }}
                autoplay={{ delay: 2000 }}
                loop={true}
                onSlideChange={(swiper) => {
                    this.setState({
                        swiperBg: swiper.realIndex
                    })
                }}
                onSwiper={(swiper) => { this.setState({ myswiper: swiper }); }}
            >
                {
                    headerLooplist.map((item, index) =>
                        <SwiperSlide key={index}>
                            <div className='headerloop'><img src={item.pictureURL} alt={item.pictureURL} /></div>
                            <img src={item.singleBackgroundURL} alt={item.singleBackgroundURL} className='backgroud_img' />
                        </SwiperSlide>
                    )
                }
            </Swiper>

            {/* 首页导航图片区开始  */}
            <div className='WangZai1_nav'>
                <ul>
                    {
                        listNav.map((item, index) =>
                            <li key={index}>
                                <img src={item.pictureURL} alt='item.pictureName'></img>
                                <span>{item.pictureName}</span>
                            </li>)
                    }
                </ul>
            </div>
            {/* 首页导航图片区结束  */}

        </div>
    }

}

export default MainHeader;